<template>
	<view class="container">
		<view class="meter_box" v-if="selectShow" @click.stop="closeDialog">
			<uni-card title="选择电表">
				<view class="meter_select">
					<u--input placeholder="输入电表号搜索" border="surround" v-model="meterQueryForm.electricityNo"
						@change="getMeterList"></u--input>
					<u-list height="500rpx">
						<u-list-item v-for="(item, index) in meterList" :key="index">
							<u-cell :title="item.electricityNo" @click="selectMeter(item)">
								<view slot="value">
									<u-tag v-if="item.ownerId && !item.operatorCode" text="业主侧" plain size="mini"
										shape="circle"></u-tag>
									<u-tag v-if="!item.ownerId && item.operatorCode" text="运营商侧" plain size="mini"
										shape="circle"></u-tag>
									<u-tag v-if="item.ownerId && item.operatorCode" text="业主侧" plain size="mini"
										shape="circle"></u-tag>
									<u-tag v-if="!item.ownerId && !item.operatorCode" text="未绑定" plain size="mini"
										shape="circle"></u-tag>
								</view>
							</u-cell>
						</u-list-item>
					</u-list>
					<u-empty v-if="!meterList.length" mode="message" text="无内容" iconColor="#5976ba"></u-empty>
				</view>
			</uni-card>
		</view>
		<u-sticky v-if="currentMeterId">
			<view>电表：{{currentMeter.electricityNo}}</view>
			<u-icon name="rewind-right-fill" @click="selectShow = !selectShow"></u-icon>
		</u-sticky>
		<view class="record_list" v-if="currentMeterId && recordList && recordList.length">
			<uni-card v-for="(item,index) in recordList" :key="item.id" margin="10" padding="8">
				<view class="item_body" @click.native="selectHandler({row:item,index:index})">
					<view class="select_flag">
						<u-icon name="checkmark-circle" v-if="!item.checked"></u-icon>
						<u-icon name="checkmark-circle-fill" v-else></u-icon>
					</view>
					<view class="item_row">
						<view class="item_cell">
							<text class="item_tips">抄表日期:</text>
							<text class="item_content important">{{item.meterReadingTime}}</text>
						</view>
					</view>
					<view class="item_row">
						<view class="item_cell">
							<text class="item_tips">是否审核:</text>
							<u-tag v-if="!item.auditStatus" type="danger" size="mini" text="未审核"></u-tag>
							<u-tag v-if="item.auditStatus" type="success" size="mini" text="已通过"></u-tag>
						</view>
					</view>
					<view class="item_row">
						<view class="item_cell">
							<text class="item_tips">本期电表度数:</text>
							<text class="item_content">{{item.electricityBillDegree}}</text>
						</view>
						<view class="item_cell">
							<text class="item_tips">本期用电量:</text>
							<text class="item_content">{{item.electricityConsumption}}</text>
						</view>
					</view>
					<view class="item_row">
						<view class="item_cell">
							<text class="item_tips">业主未结:</text>
							<u-tag v-if="item.owCreate !== 1 && item.ownerNot" type="warning" size="mini"
								:text="item.ownerNot"></u-tag>
							<u-tag v-if="item.owCreate !== 1 && !item.ownerNot" type="success" size="mini"
								text="已结清"></u-tag>
							<u-tag v-if="item.owCreate === 1" type="info" size="mini" text="不可生成"></u-tag>
						</view>
						<view class="item_cell">
							<text class="item_tips">运营商未结:</text>
							<u-tag v-if="item.opCreate !== 1 && item.operatorNot" type="warning" size="mini"
								:text="item.operatorNot"></u-tag>
							<u-tag v-if="item.opCreate !== 1 && !item.operatorNot" type="success" size="mini"
								text="已结清"></u-tag>
							<u-tag v-if="item.opCreate === 1" type="info" size="mini" text="不可生成"></u-tag>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<uni-goods-nav v-if="currentMeterId" fill :options="navBarOptions" :buttonGroup="bavBarBtns"
			@buttonClick="goodClickHandler" />
		<u-empty mode="message" text="无内容" iconColor="#5976ba" v-if="currentMeterId && !recordList.length">
		</u-empty>

		<!-- 消息通知 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 审批结果 -->
		<u-modal :show="auditShow" content='确认将该条抄表记录通过吗?' showCancelButton confirmText="通过" cancelText="再想想"
			@confirm="agree" @cancel="auditShow = false"></u-modal>
		<!-- 拆分度数 -->
		<u-popup :show="createShow" mode="center" :closeOnClickOverlay="false" closeable @close="createShow = false">
			<view class="split_title">
				拆分度数
			</view>
			<view class="split_body">
				<view class="split_item" v-for="(item,index) in selectedRecord" :key="index">
					<view class="split_left">
						<view class="split_time">{{item.meterReadingTime}}</view>
						<view class="split_all">总：
							<view class="split_count">{{item.electricityConsumption}}</view>
							<!-- <u-tag size="mini" :text="item.electricityConsumption"></u-tag> -->
						</view>
						<view class="split_not">未结：
							<view class="split_count">{{item.notDone}}</view>
							<!-- <u-tag type="warning" size="mini" :text="item.notDone"></u-tag> -->
						</view>
					</view>
					<view class="split_number">
						<uni-number-box :value="item.elcNumber" :min="1" :max="item.notDone" background="#2979FF"
							:width="45" color="#fff" :step="0.01" @change="changeNumber($event,item)" />
					</view>
				</view>
			</view>
			<view class="split_footer">
				<u-button text="取消" @click="createShow = false"></u-button>
				<u-button type="primary" text="生成订单" @click="createConfirm"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		meterList,
		getAllRecord,
		auditAgree,
		makeEleOwnerOrder,
		makeEleOperatorOrder
	} from '@/apis/meter.js'
	export default {
		data() {
			return {
				meterQueryForm: {
					page: 1,
					size: 999,
					electricityNo: null
				},
				currentMeterId: null,
				currentMeter: {},
				meterList: [],
				recordList: [],
				selectShow: false,
				auditShow: false,
				createShow: false,
				swipeOptions: [{
					text: '本次移除'
				}],
				currentRecord: {},
				selectedKey: [],
				selectedRecord: [],
				createType: null,
				navBarOptions: [{
					icon: 'flag-filled',
					text: '已选记录',
					info: 0,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, ],
				bavBarBtns: [{
						text: '生成业主订单',
						backgroundColor: '#9d858f'
					},
					{
						text: '生成运营商订单',
						backgroundColor: '#4a4b9d'
					},
				]
			}
		},
		created() {
			this.getMeterList()
		},
		onReady() {
			if (!this.currentMeterId) {
				this.selectShow = true
				this.$refs.uToast.show({
					message: '请先选择电表',
					type: 'info',
					position: 'top',
					duration: 1000
				})
			}
		},
		methods: {
			async getMeterList() {
				const {
					data
				} = await meterList(this.meterQueryForm)
				this.meterList = data
			},
			async getSendRecord() {
				const {
					data
				} = await getAllRecord(this.currentMeterId)
				data.forEach(i => i.checked = false)
				this.recordList = data
			},
			async selectMeter(item) {
				this.currentMeter = item
				this.currentMeterId = item.id
				await this.getSendRecord()
				setTimeout(() => {
					this.selectShow = false
				})
			},
			selectHandler(data) {
				this.recordList[data.index].checked = !this.recordList[data.index].checked
				if (this.selectedKey.includes(data.row.id)) {
					this.selectedKey = this.selectedKey.filter(i => i != data.row.id)
				} else {
					this.selectedKey.push(data.row.id)
				}
				this.navBarOptions[0].info = this.selectedKey.length
			},
			closeDialog() {
				if (this.currentMeterId) {
					this.selectShow = !this.selectShow
				}
			},
			goodClickHandler(data) {
				if (data.index === 0) {
					this.createOwnerOrder()
				} else {
					this.createOperatorOrder()
				}
			},
			createOwnerOrder() {
				const records = this.recordList.filter(i => this.selectedKey.includes(String(i.id)))
				if (!records || !records.length) return this.$refs.uToast.show({
					message: '请选择抄表记录',
					type: 'error',
					duration: 1000
				})
				if (records.some(i => !i.auditStatus)) return this.$refs.uToast.show({
					message: '不可勾选未通过审核的抄表记录',
					type: 'error',
					duration: 1000
				})
				if (records.some(i => i.owCreate === 1)) return this.$refs.uToast.show({
					message: '请检查是否存在业主电费合同',
					type: 'error',
					duration: 1000
				})
				if (records.some(i => i.owCreate === 2 && !i.ownerNot)) return this.$refs.uToast.show({
					message: '不可勾选已结清的抄表记录',
					type: 'error',
					duration: 1000
				})
				this.selectedRecord = records.map(i => ({
					issueId: i.id,
					meterReadingTime: i.meterReadingTime,
					electricityConsumption: i.electricityConsumption,
					notDone: i.ownerNot,
					isDone: 0,
					elcNumber: i.ownerNot
				}))
				this.createType = 1 //业主
				this.createShow = true
			},
			createOperatorOrder() {
				const records = this.recordList.filter(i => this.selectedKey.includes(String(i.id)))
				if (!records || !records.length) return this.$refs.uToast.show({
					message: '请选择抄表记录',
					type: 'error',
					duration: 1000
				})
				if (records.some(i => !i.auditStatus)) return this.$refs.uToast.show({
					message: '不可勾选未通过审核的抄表记录',
					type: 'error',
					duration: 1000
				})
				if (records.some(i => i.opCreate === 1)) return this.$refs.uToast.show({
					message: '请检查是否存在业主电费合同',
					type: 'error',
					duration: 1000
				})
				if (records.some(i => i.opCreate === 2 && !i.operatorNot)) return this.$refs.uToast.show({
					message: '不可勾选已结清的抄表记录',
					type: 'error',
					duration: 1000
				})
				this.selectedRecord = records.map(i => ({
					issueId: i.id,
					meterReadingTime: i.meterReadingTime,
					electricityConsumption: i.electricityConsumption,
					notDone: i.operatorNot,
					isDone: 0,
					elcNumber: i.operatorNot
				}))
				this.createType = 2 //运营商
				this.createShow = true
			},
			changeNumber(val, item) {
				item.elcNumber = val
				item.isDone = val === item.notDone ? 0 : 1
			},
			async createConfirm() {
				if (this.selectedRecord.some(i => i.notDone < i.elcNumber)) return this.$refs.uToast.show({
					message: '存在结算用电量大于未结算用电量！',
					type: 'error',
					duration: 1000
				})
				if (this.createType === 1) {
					await makeEleOwnerOrder(JSON.stringify(this.selectedRecord))
				} else {
					await makeEleOperatorOrder(JSON.stringify(this.selectedRecord))
				}
				uni.showToast({
					title: '生成订单成功！',
					type: 'success',
					duration: 1000
				})
				setTimeout(() => {
					uni.redirectTo({
						url: `/pages/eleOrder/eleOrderManage`
					})
				}, 1500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 20rpx;

		.record_list {
			position: absolute;
			top: 8%;
			left: 2%;
			right: 2%;
			bottom: 3%;
			overflow: auto;
			z-index: 555;

			.item_img {
				margin: 0 auto;
				width: 90%;
				height: 38%;
			}

			.item_body {
				margin-top: 20rpx;
				border-bottom: 1rpx solid #5976ba;

				.select_flag {
					position: absolute;
					right: 5px;
					top: 5px;
				}

				.item_row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;

					.item_cell {
						flex: 1;
						display: flex;
						// justify-content: center;
						align-items: center;

						.item_tips {
							color: #bfbfbf;
							margin-right: 10rpx;
						}

						.item_content {
							color: #333;
							font-weight: 700;
						}

						.item_content.important {
							font-size: 32rpx;
							font-weight: 700;
							color: #0050b3;
						}
					}
				}
			}
		}

		::v-deep .u-sticky {
			width: 100%;
			height: 8%;
			z-index: 666;

			.u-sticky__content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #5290FF;
				border-color: #5976ba;
				padding: 30rpx;
				color: #fff;
				font-size: 35rpx;
				font-weight: 700;
				border-radius: 0 0 20rpx 20rpx;

				.u-icon__icon {
					font-size: 50rpx !important;
					font-weight: 700 !important;
					color: #fff !important;
				}
			}
		}

		::v-deep .u-empty {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.meter_box {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .3);
			z-index: 666;
		}
	}

	::v-deep .u-popup__content__close {
		z-index: 10088;
	}

	.split_title {
		position: absolute;
		font-size: 36rpx;
		font-weight: 700;
		left: 20rpx;
		top: 20rpx;
		width: 100%;
		padding-bottom: 20rpx;
		background-color: #fff;
		z-index: 10086;
	}

	.split_body {
		margin-top: 50rpx;
		padding: 20rpx;
		width: 650rpx;
		height: 550rpx;
		overflow: auto;
		border-radius: 20rpx;

		.split_item {
			width: 100%;
			padding: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx dashed #adb5bd;

			.split_left {
				width: 70%;
				height: 100%;
				display: flex;
				flex-direction: column;

				.split_time {
					padding: 5rpx 0;
					font-size: 28rpx;
					font-weight: 700;
					color: #333;
				}

				.split_all {
					padding: 5rpx 0;
					display: flex;
					align-items: center;
					font-size: 26rpx;

					.split_count {
						color: #0050b3;
					}
				}

				.split_not {
					padding: 5rpx 0;
					display: flex;
					align-items: center;
					font-size: 26rpx;

					.split_count {
						color: #d9480f;
					}
				}
			}

			.split_number {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.split_footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
	}

	::v-deep .uicon-checkmark-circle {
		font-size: 35rpx !important;
		color: #d9d9d9 !important;
	}

	::v-deep .uicon-checkmark-circle-fill {
		font-size: 35rpx !important;
		color: #52c41a !important;
	}

	.meter_box>::v-deep .uni-card {
		position: absolute;
		top: 50%;
		left: 2%;
		right: 2%;
		border-radius: 5%;
		transform: translateY(-50%);
		border-color: #5976ba;
		background-color: #5290FF;
		padding: 0 !important;

		.uni-card__header-content-title {
			font-size: 40rpx;
			font-weight: 700;
			color: #fff !important;
		}

		.uni-card__content {
			background-color: #fff;
		}

		.meter_select {
			height: 600rpx;

			::v-deep .u-list {
				margin-top: 10rpx;
			}
		}
	}

	::v-deep .uni-card {
		border-radius: 5%;
		border-color: #5976ba;
	}

	::v-deep .uni-goods-nav {
		z-index: 999;
		border-radius: 20rpx;
		position: fixed;
		bottom: 3%;
		left: 0;
		right: 0;

		.uni-tab__cart-box {
			background-color: rgba(255, 255, 255, .9);
		}
	}
</style>